@import '../core/style/elevation';
@import '../core/style/vendor-prefixes';
@import '../core/style/layout-common';
@import '../../cdk/a11y/a11y';

$mat-button-toggle-padding: 0 16px !default;
$mat-button-toggle-height: 36px !default;
$mat-button-toggle-border-radius: 2px !default;

.mat-button-toggle-standalone,
.mat-button-toggle-group {
  @include mat-elevation(2);
  position: relative;
  display: inline-flex;
  flex-direction: row;

  border-radius: $mat-button-toggle-border-radius;

  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;

  @include cdk-high-contrast {
    outline: solid 1px;
  }
}

.mat-button-toggle-vertical {
  flex-direction: column;

  .mat-button-toggle-label-content {
    // Vertical button toggles shouldn't be an inline-block, because the toggles should
    // fill the available width in the group.
    display: block;
  }
}

.mat-button-toggle-disabled .mat-button-toggle-label-content {
  cursor: default;
}

.mat-button-toggle {
  white-space: nowrap;
  position: relative;
  -webkit-tap-highlight-color: transparent;

  // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
  // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always
  // treated as programmatic focus.
  // TODO(paul): support `program` as well. See https://github.com/angular/material2/issues/9889
  &.cdk-keyboard-focused {
    .mat-button-toggle-focus-overlay {
      opacity: 1;

      // In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
      @include cdk-high-contrast {
        opacity: 0.5;
      }
    }
  }
}

.mat-button-toggle-label-content {
  @include user-select(none);
  display: inline-block;
  line-height: $mat-button-toggle-height;
  padding: $mat-button-toggle-padding;
  cursor: pointer;
}

.mat-button-toggle-label-content > * {
  vertical-align: middle;
}

// Overlay to be used as a tint.
.mat-button-toggle-focus-overlay {
  border-radius: inherit;

  // Disable pointer events to prevent it from hijacking user events.
  pointer-events: none;
  opacity: 0;
  @include mat-fill;

  .mat-button-toggle-checked & {
    // Changing the background color for the selected item won't be visible in high contrast mode.
    // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
    // It uses a border, because the browser will render it using a brighter color.
    @include cdk-high-contrast {
      opacity: 0.5;
      height: 0;
      border-bottom: solid $mat-button-toggle-height;
    }
  }
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-button-toggle .mat-button-toggle-ripple {
  @include mat-fill;

  // Disable pointer events for the ripple container, because the container will overlay the user
  // content and we don't want to prevent mouse clicks that should toggle the state.
  // Pointer events can be safely disabled because the ripple trigger element is the label element.
  pointer-events: none;
}

.mat-button-toggle-button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
}
